{% include 'header.html' %}
  <div class="layui-fluid">
    <div class="layui-row layui-col-space15">
      <div class="layui-col-md12">
        <div class="layui-card">
          <div class="layui-card-header">预警任务管理</div>
          <div class="layui-card-body">
            <button type="button" class="layui-btn" id="add">添加</button><p>&nbsp;</p>
            <table id="demo" lay-filter="test"></table>
          </div>
        </div>
      </div>
    </div>
  </div>
<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-xs" lay-event="detail">查看</a>
  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script>
  layui.use('layer',function(){
    var layer = layui.layer;
    var $ = layui.$;
    $("#add").click(function (event) {
       layer.open({
        type: 2,
        title: '编辑项目',
        shadeClose: true,
        shade: 0.8,
        maxHeight: '600px', // 设置最大高度，超出会出现滚动条
        scrollbar: true, // 开启滚动条
        area: ['750px', '500px'],
        content: '/alert_manage/alert_msg/formadd?model=school&id=0', // 编辑器页面的URL
      });
    });
  })
</script>
  <script>
layui.use('table', function(){
  var table = layui.table;

  var cols;

  // 发起ajax请求
  $.ajax({
    url: '/alert_manage/alert_msg/cols',
    method: 'GET',
    success: function(response) {
      // 将获取到的数据赋值给全局变量
      obj = JSON.parse(response)
      cols = [obj.data]
      console.log("===================================")
      console.log(cols); // 打印全局变量的值
      //第一个实例
      table.render({
      elem: '#demo'

      ,url: '/alert_manage/alert_msg/page' //数据接口
      ,page: true //开启分页
      ,cols: cols
      });
    },
    error: function(error) {
      console.log(error);
    }
  });

  //工具条事件
table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
  var data = obj.data; //获得当前行数据
  var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
  var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）

  if(layEvent === 'detail'){ //查看
    alert(data);
  } else if(layEvent === 'add'){ //添加
    alert("add")
  } else if(layEvent === 'del'){ //删除
    layer.confirm('真的删除行么', function(index){
    // 使用Ajax进行异步提交
      layui.jquery.ajax({
        url: '/alert_manage/alert_msg/delete?id='+data.id, // 服务器接口
        type: 'get',
        success: function(res){
          layer.msg("删除成功")
        }
      });
      obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
      layer.close(index);
      //向服务端发送删除指令
    });
  } else if(layEvent === 'edit'){ //编辑
    //do something
    // 弹框的配置项
    layer.open({
        type: 2,
        title: '编辑项目',
        shadeClose: true,
        shade: 0.8,
        maxHeight: '600px', // 设置最大高度，超出会出现滚动条
        scrollbar: true, // 开启滚动条
        area: ['750px', '500px'],
        content: '/alert_manage/alert_msg/form?model=alert_msg&id='+data.id, // 编辑器页面的URL
    });
    //同步更新缓存对应的值
    obj.update({
      username: '123'
      ,title: 'xxx'
    });
  } else if(layEvent === 'LAYTABLE_TIPS'){
    layer.alert('Hi，头部工具栏扩展的右侧图标。');
  }
});
});
  </script>
{% include 'footer.html' %}